<template>
  <div class="">
    <div class="back">
      <van-nav-bar title="选择城市" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="current-city">
      <h3>当前定位城市</h3>
      <div>北京</div>
    </div>
    <div class="change-city">选择城市</div>
    <van-index-bar>
      <div v-for="(value, key, index) in CityJSON.city_list" :key="index">
        <van-index-anchor :index="key">{{ key }}</van-index-anchor>
        <van-cell :title="item.city" v-for="(item, index) in CityJSON.city_list[key]" :key="index" @click="onSelectCity(item.city)"/>
      </div>
    </van-index-bar>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue"
import { useRouter } from "vue-router"
import CityJSON from "../../assets/json/city_list.json"
import { useCityStore } from "../../stores/city"

const router = useRouter()
const cityStore = useCityStore()

const onClickLeft = () => {
  router.back()
}

const onSelectCity = (city:string) =>{
  cityStore.city = city
  router.back()
}

</script>
<style lang="less" scoped>
.current-city {
  background: #fff;
  margin: 10px 0;
  padding: 10px;

  h3 {
    font-size: 14px;
    color: #999999;
    font-weight: 400;
  }

  div {
    font-size: 14px;
    margin-top: 15px;
  }
}

.change-city {
  background: #fff;
  margin: 10px 0;
  padding: 10px;
}
</style>
